<script setup lang="ts" name="B46ReadonlyAndShallowReadonly">
import { readonly, ref } from "vue";

let sum1 = ref(0);
let sum2 = readonly(sum1);

const changeSum1 = () => {
  sum1.value += 1;
};
const changeSum2 = () => {
  sum2.value += 1;
};
</script>

<template>
  <div
    class="container mx-auto max-w-3xl border shadow rounded bg-white my-6 p-6 flex flex-col gap-y-3"
  >
    <div>sum1: {{ sum1 }}</div>
    <div>sum2: {{ sum2 }}</div>
    <div class="flex gap-x-1">
      <button class="border px-1 py-0.5 bg-gray-50" @click="changeSum1">
        sum1+1
      </button>
      <button class="border px-1 py-0.5 bg-gray-50" @click="changeSum2">
        sum2+1
      </button>
    </div>
  </div>
</template>
